<template>
  <div class="user-card">
    <div class="ppp">{{ staticData.user.name }}，您好</div>
    <div class="ppp">
      您出生在 {{ staticData.user.birthdayObj.year }}年{{ staticData.user.birthdayObj.month }}月{{
        staticData.user.birthdayObj.day
      }}日，今年{{ staticData.user.age }}岁
    </div>
    <div class="ppp">
      距离您65周岁还有：{{ model.ageCountdown(65).month }}月，{{
        model.ageCountdown(65).week
      }}周，{{ model.ageCountdown(65).day }}天
    </div>
    <div class="ppp">时光荏苒，光阴如梭</div>
    <div class="ppp">希望您珍惜未来的人生</div>
    <el-divider class="my-divider" />
    <div class="ppp">
      距离您
      <el-select v-model="ageCDValue" :style="{ width: '70px', margin: '0 5px' }">
        <el-option v-for="item in ageCDOptions" :key="item" :label="item" :value="item" />
      </el-select>
      周岁还有:
    </div>
    <el-dropdown split-button type="primary" trigger="click" size="large" @command="handleClick">
      <div class="countdownNumber">
        {{ model.ageCountdown(ageCDValue)[ageCDUnit] }} {{ ageCDUnitText }}
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="month">月</el-dropdown-item>
          <el-dropdown-item command="week">周</el-dropdown-item>
          <el-dropdown-item command="day">日</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script lang="ts">
export default defineComponent({ name: 'CompUserCard' })
</script>
<script setup lang="ts">
import { defineComponent, ref } from 'vue'
import { useLifeCalender } from '../hooks/lifeCalender'

const { staticData, model } = useLifeCalender()

const ageCDValue = ref(65)
const ageCDOptions = (() => {
  let list = []
  for (let i = staticData.user.age; i < 120; i++) {
    list.push(i)
  }
  return list
})()

const ageCDUnit = ref<'month' | 'week' | 'day'>('week')
const ageCDUnitText = ref('周')
function handleClick(command: 'month' | 'week' | 'day') {
  ageCDUnit.value = command
  if (command === 'month') {
    ageCDUnitText.value = '月'
  } else if (command === 'week') {
    ageCDUnitText.value = '周'
  } else if (command === 'day') {
    ageCDUnitText.value = '日'
  }
}
</script>

<style lang="scss">
@import '../theme.scss';
</style>
<style lang="scss" scoped>
.user-card {
  background-color: var(--life-calendar-user-card-bg-color);
  backdrop-filter: blur(15px); // 毛玻璃
  color: var(--color);
  width: 400px;
  padding: 15px 20px;
  margin: 10px;
  border-radius: 6px;
  .ppp {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 0.8em;
    display: flex;
    align-items: center;
  }
  .countdownNumber {
    font-size: 18px;
    width: 130px;
  }
}
.my-divider {
  border-top: 1px solid var(--border-color);
}
</style>
